<template>
  <div>
    <div class="recommend-list">
      <div class="explain-text">
        点击不同的提示词语发送给AI后，会产生不同的效果!<br>
        注意: 每次使用前尽量清空上下文
      </div>
      <hr>
      <div class="recommend-prompt" v-for="(item, index) in recommendList" :key="index">
        <el-button type="primary" round size="small" @click="fillProblem(item.content)" style="margin-top: 20px;margin-left: 30px">{{item.title}}</el-button>
      </div>
    </div>
    <div class="chat-container">
      <!-- 加载动画 -->
      <div v-if="isSending" class="loading-overlay">
        <div class="loading-icon"></div>
        ChatGPT处理中......
      </div>
      <div class="chat-area" ref="chatArea">
        <div class="chat-records">
          <div v-for="(item, index) in chatRecords" :key="index" class="chat-record">
            <div v-if="item.type === 'question'" class="chat-bubble chat-question">
              <div class="avatar user-avatar"><img src="../assets/avatar.jpg" /></div>
              <div class="text">{{ item.content }}</div>
            </div>
            <div v-else-if="item.type === 'answer'" class="chat-bubble chat-answer">
              <div class="avatar bot-avatar"><img src="../assets/rebot.jpeg" /></div>
              <div v-if="!item.code" class="text">{{ item.content }}</div>
              <pre v-else class="code-block">{{ item.content }}</pre>
            </div>
          </div>
        </div>
      </div>
      <div class="input-area">
        <el-button type="danger"  size="small" @click="clearChat" class="input-btn">清空</el-button>
        <el-input class="problem-input" type="textarea" :autosize="{ minRows: 1, maxRows: 2 }" placeholder="向chatgpt说点什么吧！" v-model="currentProblem" :disabled="isSending" @keyup.enter="sendRequest"></el-input>
        <el-button :disabled="isSending" @click="sendRequest" class="input-btn">发送</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import axiosInstance from "@/api/request";
export default {
  name: "Chat",
  data() {
    return {
      currentProblem: "", // 当前输入的问题
      chatRecords: [], // 聊天记录
      isSending: false, // 是否正在发送请求
      shouldScrollToBottom: true, // 是否应该滚动到底部
      recommendList: []
    };
  },
  methods: {
    async sendRequest() {
      if (this.isSending || this.currentProblem.trim().length === 0) {
        return; // 如果正在发送请求，则不执行任何操作
      }

      const record = { type: 'question', content: this.currentProblem };
      this.chatRecords.push(record); // 将问题添加到聊天记录中并展示在屏幕上
      this.scrollToBottom()
      if (this.shouldScrollToBottom) {
        // 如果应该滚动到底部，则将 chat-area 滚动到底部
        const element = this.$refs.chatArea;
        element.scrollTop = element.scrollHeight;
      }

      this.isSending = true;
      try {
        const response = await axiosInstance.post('/chat/send', { problem: this.currentProblem });
        const answer = response.data.data.answer;
        const record = { type: 'answer', content: answer, code: false };
        if (answer.includes('```')){
          record.code = true
        }
        this.chatRecords.push(record); // 将答案添加到聊天记录中并展示在屏幕上
        if (this.shouldScrollToBottom) {
          // 如果应该滚动到底部，则将 chat-area 滚动到底部
          const element = this.$refs.chatArea;
          element.scrollTop = element.scrollHeight;
        }
        this.currentProblem = ""; // 清空输入框内容
      } catch (error) {
        console.error(error);
        const errorMsg = { type: 'answer', content: error };
        this.chatRecords.push(errorMsg)
        this.scrollToBottom()
      }
      this.isSending = false;
    },
    async getRecommendListList(){
      const axiosResponse = await axiosInstance.post("/prompt/list");
      if (axiosResponse.data.state.code !== '0'){
        console.error(axiosResponse.data.state.msg)
        return
      }
      this.recommendList = axiosResponse.data.data;
      console.log(axiosResponse.data.data)
    },
    scrollToBottom() {
      this.$nextTick(() => {
        const chatArea = this.$refs.chatArea;
        chatArea.scrollTop = chatArea.scrollHeight;
      });
    },
    clearChat(){
      const b = confirm('确定要清空所有聊天内容吗？');
      if (b){
        this.chatRecords = [];
        this.currentProblem = '';
      }

    },
    fillProblem(prompt){
      this.currentProblem = prompt;
    }
  },
  mounted() {
    this.scrollToBottom()
    this.getRecommendListList()
  }
};
</script>

<style scoped>
.chat-container {
  justify-content: center;
  align-items: center;
  background-color: rgba(100,100,100,0.4); /* 背景图片 */
  background-size: cover;
  height: 100vh;
  width: 100%;
}

.chat-area {
  overflow-y: auto;
  overflow-x: hidden;
  margin-bottom: 20px;
  margin-left: 209px;
  width: 1200px;
  height: 85vh;
  background-color: rgba(255,255,255,0.6);
}

.chat-records {
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
}

.chat-record {
  margin-bottom: 10px;
}

.chat-bubble {
  align-items: center;
  width: 100%;
}

.chat-question {
  margin-left: 400px;
  width: 80%;
}

.chat-answer {
  width: 80%;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 10px;
}

.user-avatar{
  margin-left: 730px;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.text {
  background-color: #325e86;
  padding: 10px;
  border-radius: 10px;
  max-width: 80%;
}

.chat-question .text {
  border-bottom-left-radius: 0;
}

.chat-answer .text {
  border-bottom-right-radius: 0;
}

.problem-input {
  margin-left: 20px;
  font-size: 16px;
  margin-top: 2px;
  padding: 10px;
  border-radius: 10px;
  border: none;
  background-color: rgba(255, 255, 255, 0.8);
  margin-right: 10px;
  width: 1040px;
}

button {
  font-size: 12px;
  padding: 10px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}



button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.chat-record button {
  font-size: 14px;
  padding: 5px 10px;
  border-radius: 10px;
  border: none;
  background-color: #ff4d4f;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  margin-left: 10px;
}

.chat-record button:hover {
  background-color: #ff7875;
}
.input-area {
  width: 1200px;
  margin-left: 209px;
}


.recommend-list {
  overflow-y: auto;
  overflow-x: hidden;
  float: left;
  margin-left: 4px;
  width: 201px;
  height: 100vh;
  background-color: rgba(200,200,180,0.1);
}
.recommend-prompt {
  height: 50px;
}

/* 加载动画样式 */
.loading-overlay {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(255,255,255,0.6);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-icon {
  border-radius: 50%;
  width: 24px;
  height: 24px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.explain-text {
  margin-left: 6px;
  height: 60px;
  width: 201px;
  margin-top: 20px;
  color: indianred;
  font-size: 12px;
}
.input-btn {
  margin-bottom: 15px;
}
.code-block {
  background-color: #8f7878;
  padding: 10px;
  font-family: monospace;
  white-space: pre-wrap;
  word-break: break-all;
  color: #333;
}
</style>